import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Form, Input, Button, Card, Radio, Select, Icon, Tooltip } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DraftEditor from '../../components/DraftEditor';
import ArticleCover from '../../components/ArticleCover';
import styles from './style.less';

const FormItem = Form.Item;
const { TextArea } = Input;

@connect(({ loading }) => ({
  submitting: loading.effects['article/add'],
}))
@Form.create()
export default class BasicForms extends PureComponent {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.dispatch({
          type: 'article/add',
          payload: values,
        });
      }
    });
  };

  normFile = e => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  render() {
    const { submitting } = this.props;
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
        md: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 14 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 0 },
        md: { span: 10, offset: 5 },
      },
    };

    return (
      <PageHeaderLayout title="新增文章">
        <Card bordered={false}>
          <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
            <FormItem {...formItemLayout} label="标题">
              {getFieldDecorator('title', {
                rules: [
                  {
                    required: true,
                    message: '请输入标题',
                  },
                ],
              })(<Input placeholder="给目标起个名字" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="分类">
              {getFieldDecorator('categoryId')(
                <Select placeholder="请选择">
                  <Select.Option value={1}>视频</Select.Option>
                  <Select.Option value={2}>热点</Select.Option>
                </Select>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="封面">
              {getFieldDecorator('cover', {
                rules: [
                  {
                    required: true,
                    message: '请选择封面',
                  },
                ],
              })(<ArticleCover className={styles.cover} />)}
            </FormItem>
            <FormItem {...formItemLayout} label="摘要">
              {getFieldDecorator('abstract', {
                rules: [
                  {
                    required: true,
                    message: '请输入摘要',
                  },
                ],
              })(<TextArea style={{ minHeight: 32 }} placeholder="请输入摘要" rows={4} />)}
            </FormItem>
            <FormItem {...formItemLayout} label="正文">
              {getFieldDecorator('content', {
                rules: [
                  {
                    required: true,
                    message: '请输入文章内容',
                  },
                ],
              })(<DraftEditor />)}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label={
                <span>
                  来源
                  <em className={styles.optional}>
                    （选填）
                    <Tooltip title="文章来源">
                      <Icon type="info-circle-o" style={{ marginRight: 4 }} />
                    </Tooltip>
                  </em>
                </span>
              }
            >
              {getFieldDecorator('source')(<Input placeholder="请输入文章来源" />)}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label={
                <span>
                  关键字<em className={styles.optional}>（选填）</em>
                </span>
              }
            >
              {getFieldDecorator('keywords')(
                <Input placeholder="请输入文章关键字，多个关键字用','隔开" />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label={
                <span>
                  标签<em className={styles.optional}>（选填）</em>
                </span>
              }
            >
              {getFieldDecorator('tags')(<Input placeholder="请输入文章标签，多个标签用','隔开" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="是否发布" help="选发布将立即发布">
              <div>
                {getFieldDecorator('status', {
                  initialValue: 1,
                })(
                  <Radio.Group>
                    <Radio value={0}>不发布</Radio>
                    <Radio value={1}>发布</Radio>
                  </Radio.Group>
                )}
              </div>
            </FormItem>
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button
                type="primary"
                htmlType="submit"
                size="large"
                className={styles.submitBtn}
                loading={submitting}
              >
                提 交
              </Button>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderLayout>
    );
  }
}
